<template>
  <div>
    <div class="tabXX">
      <Home v-if="active == 0" ref="Homeref" @activeindex="activeindex" />
      <XCFW v-if="active == 1" />
      <CPYY v-if="active == 2" />
      <!-- <XCFW v-if="active == 1" /> -->

      <MY v-if="active == 3" />
    </div>
    <van-popup v-model="popupshow" round :close-on-click-overlay="false">
      <div class="xxfrom">
        <div class="titleYHzc">用户注册</div>
        <van-form label-width="60px">
          <van-cell-group>
            <van-field
              v-model="modelXX.mobile"
              name="validatePhone"
              label="手机号"
              placeholder="请输入手机号"
              :rules="[{ validator: validatePhone, message: phoneError }]"
            />
            <!-- <van-field
              v-model="data.modelXX.code"
              center
              clearable
              label="验证码"
              placeholder="请输入验证码"
              :error-message="smsError"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  :disabled="!canSendSms || countdown > 0"
                  @click="sendSmsCode"
                >
                  {{ countdown > 0 ? `${countdown}s后重试` : "获取验证码" }}
                </van-button>
              </template>
            </van-field> -->
          </van-cell-group>
          <!-- <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div> -->
          <div class="marginTop15">
            <van-button round block type="primary" @click="handleSubmit">
              提交验证
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-tabbar v-model="active" active-color="#00BAAD" @change="QH">
      <van-tabbar-item v-for="(item, index) in Tabbar" :key="index">
        <template #icon="props">
          <van-icon name="home-o" v-if="item.siteName == '首页'" />
          <van-icon name="user-o" v-if="item.siteName == '个人中心'" />
          <van-image
            width="24"
            height="24"
            :src="item.selected"
            v-if="item.siteName == '洗车服务' && active == 1"
          />
          <van-image
            width="24"
            height="24"
            :src="item.unselected"
            v-if="item.siteName == '洗车服务' && active != 1"
          />
          <van-image
            width="24"
            height="24"
            :src="item.selected"
            v-if="item.siteName == '餐饮服务'  || item.siteName == '阳光食堂' && active == 2"
          />
          <van-image
            width="24"
            height="24"
            :src="item.unselected"
            v-if="item.siteName == '餐饮服务'   || item.siteName == '阳光食堂'  && active != 2"
          />
        </template>
        {{ item.siteName }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  selectUserPhone,
  addUserMobile02,
  getSiteInfoSelectedList,
} from "@/api/realAssets/icsharedstation/home";
import { Toast, Dialog } from "vant";
import { setpersonalInformation, getpersonalInformation } from "../common/RYXX";
import { setandroidCode } from "../common/auth";
import Home from "./home.vue";
import XCFW from "../pagesNew/XCFW/index.vue";
import CPYY from "../pagesNew/CPYY/index.vue";
import MY from "../My/index.vue";
export default {
  components: {
    Home,
    XCFW,
    CPYY,
    MY,
  },
  data() {
    return {
      Tabbar: [],
      modelXX: {
        mobile: "",
        ishid: "",
        code: "",
        userName: "",
      },
      popupshow: false,
      phoneError: "",
      active: 0,
    };
  },
  watch: {
    "$route.query.id": {
      handler(newId) {
        this.active = newId * 1;
      },
      immediate: true, // 立即执行一次
    },
  },
  mounted() {
    //默认获取用户id
    let userData = JSON.parse(sessionStorage.getItem("userInfo"));
    //默认拿到用户id
    this.modelXX.ishid = userData.userId;
    this.modelXX.userName = userData.name;
    setandroidCode(this.modelXX.ishid);
    //根据用户id做判断是否注册
    this.GETxx();
    if (this.$route.query.id == undefined) {
      this.active = 0;
    }
  },
  methods: {
    activeindex(val) {
      this.active = val;
    },
    QH(val) {
      this.active = val;
      //点击后存本地
      localStorage.setItem("siteData", JSON.stringify(this.Tabbar[val]));
      this.$router.push({
        name: "rvicsharedstation-index",
        query: {
          id: val,
        },
      });
      // setTimeout(() => {
      //   if (this.active == 0) {
      //     // console.log(active.value);
      //     this.$refs.Homeref.getYH() // 调用子组件方法
      //   }
      // }, 0);
    },
    handleSubmit() {
      if (!this.validatePhone()) return;
      this.popupshow = false;
      Dialog.confirm({
        title: "手机号确认",
        message: "手机号为：【" + this.modelXX.mobile + "】",
      })
        .then(() => {
          addUserMobile02(this.modelXX).then((res) => {
            if (res.resultMessage == "FAILED") {
              Toast.fail(res.data);
              return;
            }
            Toast.success("注册成功");
            //注册成功后把信息存本地
            this.GETxx();
            // this.tbStyle.selectIndex =2
            // this.pageShow = "个人中心"
            setTimeout(() => {
              //注册成功后跳转到地理位置选择
              // router.push("/DQ/index");

              this.$router.push({
                name: "rvicsharedstation-DQ",
              });
            }, 2000);
          });
        })
        .catch(() => {
          this.modelXX.mobile = "";
          this.popupshow = true;
        });
    },
    // 是否可以发送验证码
    // const canSendSms = computed(() => {
    //   return validatePhone() && countdown.value === 0;
    // });
    validatePhone(val) {
      const reg = /^1[3-9]\d{9}$/;
      if (!this.modelXX.mobile) {
        this.phoneError = "请输入手机号";
        return false;
      }
      if (!reg.test(this.modelXX.mobile)) {
        this.phoneError = "手机号格式不正确";
        return false;
      }
      this.phoneError = "";
      return true;
    },
    GETxx() {
      //默认获取用户信息
      selectUserPhone({
        ishid: this.modelXX.ishid,
      })
        .then((resXX) => {
          // 用户id错误就弹出注册
          if (resXX.data == "用户id错误") {
            //  this.show = true;
            Dialog.confirm({
              title: "当前用户未注册",
              message: "是否立即注册",
            })
              .then(() => {
                this.popupshow = true;
                // on confirm
              })
              .catch(() => {
                // popupBDshow.value = true
                // on cancel
              });
            setpersonalInformation("");
          } else {
            if (resXX.status == 500) {
              setpersonalInformation("");
              // router.push("/error/home");
              return;
            }
            setpersonalInformation(resXX.data);

            //获取底部菜单
            if (JSON.parse(getpersonalInformation())) {
              getSiteInfoSelectedList({
                postId: JSON.parse(getpersonalInformation()).postId,
              }).then((res) => {
                let tab = res.data;
                tab.unshift({
                  selected: "",
                  unselected: "",
                  siteName: "首页",
                });
                tab.push({
                  selected: "",
                  unselected: "",
                  siteName: "个人中心",
                });
                this.Tabbar = tab;
                // console.log("111441",res.data);
              });
            }
            if (this.$refs.Homeref) {
              this.$refs.Homeref.getYH(); // 调用子组件方法
            }
            //   if (resXX.data.versions == "admin") {
            //     uni.reLaunch({
            //       url: "/pages/index/Adminindex",
            //     });
            //     return;
            //   }
          }
        })
        .catch(() => {
          // Toast.fail("接口错误");
          // router.push("/error/home");
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../static/css/index.less";
.xxfrom {
  width: 300px;
  padding: 10px;
}
.titleYHzc {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #282829;
}
.tabXX {
  height: calc(
    var(--real-vh, 1vh) * 100 - 50px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
  overflow: auto;
}
</style>
